import Vue from 'vue'
// 1
import VueRouter from 'vue-router'
import Foo from "@/pages/Foo";
import Bar from "@/pages/Bar";
import TodoList from "@/pages/TodoList";
import TodoShow from "@/pages/TodoShow";
import NotFound from "@/pages/NotFound";

// @ 是 src 路径的别名

// 2
Vue.use(VueRouter)

// 3
const router = new VueRouter({
  mode: 'history',
  linkExactActiveClass: 'my-active',
  linkActiveClass: 'active1',
  routes: [
    {
      name: 'home',
      path: '/',
      component: () => {
        return import('@/pages/Home')
      }
    },
    {
      path: '/index',
      // redirect: '/'
      redirect: {
        name: 'home'
      }
    },
    {
      name: 'm',
      path: '/m',
      component: () => import('@/pages/m/MApp'),
      meta: {
        m: true
      },
      children: [
        {
          name: 'm-home',
          path: 'home',
          component: () => import('@/pages/m/MHome'),
          meta: {
            m: true
          },
        },
        {
          // /m/type
          name: 'm-type',
          path: 'type',
          component: () => import('@/pages/m/MType'),
          meta: {
            m: true
          },
        },
        {
          name: 'm-cart',
          path: 'cart',
          component: () => import('@/pages/m/MCart'),
          meta: {
            m: true
          },
        },
        {
          name: 'm-mine',
          path: 'mine',
          component: () => import('@/pages/m/MMine'),
          meta: {
            m: true
          },
        }
      ]
    },
    {
      name: 'user',
      path: '/user/:username',
      props: true,
      component: () => import('@/pages/User'),
      children: [
        {
          path: 'profile',
          component: () => import('@/pages/User/UserProfile'),
          children: [

          ]
        },
        {
          path: 'posts',
          component: () => import('@/pages/User/UserPosts')
        }
      ]
    },
    {
      name: 'foo',
      path: '/foo',
      component: Foo
    },
    {
      path: '/bar',
      component: Bar
    },
    {
      name: 'todo',
      path: '/todo',
      component: TodoList
    },
    {
      name: 'todo-show',
      path: '/todo/:id',
      component: TodoShow,
      meta: {}
    },
    {
      name: 'not-found',
      path: '*',
      component: NotFound
    },
  ]
})

router.beforeEach((to, from, next) => {
  console.log(to)
  console.log(from)
  next()
})

export default router
